<template>
  <div>
    
    <!-- <div>内容</div> -->
    <router-view ></router-view>
    <!-- TabBar徽标提示 -->
      <van-tabbar v-model="active" active-color="orange"  @emitTotal="handleTotal">
            <van-tabbar-item to="/home/article/recommend"  icon="fire-o" >
              面经
            </van-tabbar-item >
            <!-- 图标直接换一个icon='' 即可-->
            <van-tabbar-item to="/home/collect" icon="star-o" badge="6">收藏</van-tabbar-item>
            <van-tabbar-item to="/home/like"  icon="like-o" badge="3">点赞</van-tabbar-item>
            <van-tabbar-item to="/home/mine"  icon="user-o" dot>我的</van-tabbar-item>
      </van-tabbar>
  </div>
</template>

<script>

export default {
    name:'HomePage',
    data(){
        return{
            active:0, 
            tabbar:['推荐','最新'],
            // token:''
            badge1:0,
            badge2:0,
        }
    },
    methods:{
      handleTotal(value){  //TODO
        console.log('接收的数据',value)
        this.badge1=value
      }
    },
    mounted(){
      // this.handleTotal(123)
      
      
    },
    updated(){
      
    }
    

}
</script>

<style scoped lang="less">
     .tabs-top{
      padding: 11px 11px 0 11px;
      // display: flex;
      // position: fixed;
      // top: 0px;
       a{
          width: 28px;
          height: 44px;
          // a标签默认是行内元素
          display: inline-block;
          font-size: 14px;
          line-height: 44px;
          
          // border-bottom-width: 1px;

          // background-color: orange;
          margin-right: 20px;
          color: #999999;
           &:nth-child(2){
            width: 28px;
            height: 44px;
          }
          &:nth-child(2){
            width: 28px;
            height: 44px;
          }
          margin-right: 30px;

       }
       a.router-link-exact-active{
             color: black;
             border-bottom: 1px solid black;
       }
     }
     

</style>